<template>
    <el-card class="box-card">
        <p class="item" @click="delItem">删除</p>
        <p class="item" @click="upMove">上移</p>
        <p class="item">下移</p>
    </el-card>
</template>

<script setup>
import { ref, defineProps, watch, defineEmits } from 'vue'
import { userToolbarStore } from '../../store'
const props = defineProps(["id"])
const emit = defineEmits(["offlag"])
const id = ref("")
const store = userToolbarStore()

// 监听父组件发生改变
watch(props, (newValue) => {
    id.value = newValue.id
})
// 删除
const delItem = () => {
    store.removeItem(id.value)
    emit("offlag")
}

// 上移
const upMove = () => {
    store.upMove(id.value)
    emit("offlag")
}
</script>

<style scoped>
.item {
    padding: 0;
    line-height: 35px;
}

.item:hover {
    background-color: skyblue;
    color: #fff; 
    cursor: pointer;
}

.box-card {
    width: 100px;
    text-align: center;
    opacity: 0.5;
}
</style>